<template>
  <div class="address-warpper">
    <group>
      <x-input title="收货人:" show-clear v-model="adresslist.personName"></x-input>
      <x-input title="联系电话:" show-clear type="number" is-type="china-mobile" v-model="adresslist.phone"></x-input>
      <x-address title="省市区：" label-width="70px" placeholder="请选择" :list="addressData" v-model="areaCodetext" value-text-align="left" ></x-address>
      <x-textarea placeholder="请输入详细的地址（精确到门牌号）" v-model="adresslist.address" ></x-textarea>
      <div class="fengeBar"></div>
      <x-switch title="设为默认地址" :value-map="['0', '1']"  v-model="status"></x-switch>
    </group>
    <div class="add-box" @click="handleConfirm">
      <span>{{comfirmText}}</span>
    </div>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import { Tab,XSwitch,Group,XAddress,XInput,XTextarea,ChinaAddressV4Data,Value2nameFilter as value2name } from "vux";

  export default {
    name: '',
    components: {
      Group,
      XAddress,
      XInput,
      XTextarea,
      XSwitch
    },
    data () {
      return {
        addressData: ChinaAddressV4Data,
        areaCodetext:[],
        title: '编辑地址',
        comfirmText: '保存',
        status:'0',
        adresslist:{
              phone:'',
              personName:'',
              areaCode:[],
              address:'',
              status:'0',
              userId:this.$route.query.userId
           }
      }
    },
    created(){
      
    },
    mounted(){
      this.getadresslist()
    },
    methods:{
      getadresslist(){
        if(this.$route.query.adressId){    //根据id获取地址
            var self=this
            axios('/device/userAddress/get',"post",{id:this.$route.query.adressId}).then(res=>{  
                if(res.data.code==1000){
                      console.log(res)
                      self.areaCodetext=res.data.data.areaCodeList
                      self.adresslist={
                        id:res.data.data.id,
                        phone:res.data.data.phone,
                        personName:res.data.data.name,
                        address:res.data.data.address,
                        status:res.data.data.status,
                        userId:this.$route.query.userId
                      }
                    self.status= self.adresslist.status.toString()
                }
            })
        }
      },
      handleConfirm(){
        this.adresslist.areaCode=this.areaCodetext[2]
        this.adresslist.status=this.status
        var self=this
        if(!this.$route.query.adressId){    //添加地址
          // console.log(this.adresslist)
          
          axios('/device/userAddress/create',"post",this.adresslist).then(res=>{
            if(res.data.code==1000){
               this.$vux.toast.text('添加成功')
                this.$router.go(-1);
            }
          })
        }else{         //修改地址
        console.log(this.adresslist)
          axios('/device/userAddress/update/',"post",this.adresslist).then(res=>{
            console.log(res)
            if(res.data.code==1000){
               this.$vux.toast.text('修改地址成功')
               self.$router.push({ path:'/addressManage', query: { userId: self.$route.query.userId }})
            }
          })
        }
      },
    }
  };
</script>

<style >
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .vux-label{
        font-size: 14px;
        color: #444;
    }
    .address-warpper .weui-cells{
      margin-top: 12px;
    }
   .address-warpper .weui-cells:before{
      display: none;
    }
</style>
<style lang="less" scoped>
  .address-warpper{
    height: 100%;
    box-sizing: border-box;
    // padding-top: 20rem/75;
    background: rgb(244,244,244);
    div.weui-cells{
      margin-top: 25rem/75;
    }
    div.vux-x-switch.weui-cell.weui-cell_switch:before{
      border-top: 0;
    }
    .fengeBar{
      height: 12px;
      background: rgb(244,244,244);
    }
    .add-box{
      margin: 0 50rem/75;
      margin-top: 60rem/75;
      height: 90rem/75;
      line-height: 90rem/75;
      border-radius: 6px;
      background: rgb(255,218,68);
      color: #000;
      text-align: center;
      font-size: 18px;
    }
  }

</style>

<style>
  .address-warpper .weui-cells{
      margin-top: 12px;
  }
  .address-warpper .weui-cells.vux-no-group-title{
      margin-top: 12px;
  }
  .address-warpper .weui-cells:before{
    border-top: 0;
  }
  .vux-label{
    font-size: 0.32rem;
  }

</style>
